<template>
  <div :id="comId" @layout="comChanges">
    <slot></slot>
  </div>
</template>
<script>
import { getUUid, getCommentInfo } from "@/hippy-focus/path/utils";
import Vue from "vue";
export default {
  name: "focus-content",
  components: {},
  inject: {
    focusSwitchState: {
      default: {},
    },
    focusSwitchMethods: {
      default: {},
    },
  },
  provide() {
    return {
      focusScrollState: this.state,
      focusScrollMethods: {
        getId: () => this.$el.id,
        itemChange: this.itemChange,
      },
    }
  },
  data() {
    return {
      comId: getUUid(),
      state: {

      },
    };
  },
  beforeCreate() {
    this.$items = [];
  },
  created() {

  },
  mounted() {

  },
  computed: {

  },
  beforeDestroy() {
    this.comChanges({}, true)
  },
  methods: {
    //内部焦点元素变化，更新焦点列表
    itemChange(options) {
      const _itemIdx = this.$items.findIndex(item => item.id === options.id);
      if (_itemIdx > -1) {
        if (options.isdelete) { this.$items.splice(_itemIdx, 1); }
        else { this.$items[_itemIdx] = options; }
      } else {
        this.$items.push(options);
      }
    },
    comChanges(postion = {}, isdelete = false) {
      const _info = getCommentInfo(this, { postion, isdelete })
      if (typeof this.focusSwitchMethods.otherComChange === 'function') {
        this.focusSwitchMethods.otherComChange(_info)
      } else {
        console.error('scroll组件必须包裹在switch组件内')
      }
    },
  },
  watch: {

  },
};
</script>